<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html> 
<html>
<head>
</head> 
<body> 

<div data-role="page" >
	<div data-role="header" data-backbtn="true" data-position="fixed" data-tap-toggle="false"> 
	  <a href="<%=request.getContextPath() %>/answer/user/answerListPhone.html" data-direction="reverse" data-icon="arrow-l" id="btnBack">返回</a> 
		<h1>问卷回答</h1>
		<a href="#" data-role="button" data-icon="edit" data-theme="c" onclick="saveAnswer();">保存</a>
	</div><!-- /header -->	
		<s:hidden name="send_survey_user_assuser" id="id" ></s:hidden>
		<s:hidden name="relation" id="relation"></s:hidden>
	<div data-role="content">	
		<h2>${survey.name}</h2>	
		<p>${survey.preface} </p>
		<p>&nbsp;</p>
		 <ul id="survey_view" data-role="listview" data-inset="true">
			<s:iterator value="questionList" id="q" status="question">
				<li>
				<div class="txt top5" style="width:100%">
					<strong>${question.index+1}、${q.name}</strong>
					<s:if test="#q.required == 0"><font color="red">(必答题)</font></s:if>	
				</div>
					<br/>
					<div class="txt top5" style="width:100%">
						<s:iterator value="#q.optionList" id="o" status="option">
							<label style="padding-left: 20px;">
								<s:if test="#q.styleId == 1">
									<input type="radio" name="${q.id}"  style="margin:0px 5px" value="${o.id}" score="${o.score}" <s:if test="#o.id == #o.s_id">checked</s:if> required="${q.required}"/>
									${o.name}${o.content}
								</s:if>
								<s:if test="#q.styleId == 2">
									<input type="checkbox" name="${q.id}" style="margin:0px 5px" value="${o.id}" score="${o.score}" <s:if test="#o.id == #o.s_id">checked</s:if> required="${q.required}"/>
									${o.name}${o.content}
								</s:if>
							</label>
						</s:iterator>
							<s:if test="#q.styleId == 3">
								<s:textarea name="%{#q.id}" required="%{#q.required}"  cssStyle="width: 90%; height: 100px; margin: 10px 10px 10px;" value="%{#o.text}" ></s:textarea>
							</s:if>
					</div>
				</li>
			</s:iterator>
		</ul>
		<p>&nbsp;</p>
		<p>${survey.afterword}</p>
		<p>&nbsp;</p>
	</div>
	<a href="#" data-role="button" data-icon="check" data-theme="e" onclick="submitAnswer();">提交问卷</a>
	<div data-role="footer" data-tap-toggle="false">　 
		<h4>2013©Fortao Fortao.com.cn</h4>
	</div><!-- /footer -->
	
	<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
	    <div data-role="header" data-theme="a" class="ui-corner-top">
	        <h1>确认提交</h1>
	    </div>
	    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
	        <h3 class="ui-title">确认提交问卷吗?</h3>
	        <p>提交成功后将无法再回答此问卷.</p>
	        <a href="#" data-role="button" id="cancleButton" data-inline="true"  data-rel="back" data-theme="c">取消</a>
	        <a href="#popupBasic" data-role="button" id="confirmButton" data-inline="true" data-transition="pop" data-theme="b" onclick="submitAll();">确定</a>
	    </div>
	</div>
	<div data-role="popup" id="poBasic" data-theme="e" style="max-width:850px;">
		<a href="#" data-rel="back" data-role="button" data-theme="e" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <h5>&nbsp;</h5>
    <p id="poBasicP">保存成功</p>
    <h5>&nbsp;</h5>
  </div>
	<div data-role="popup" id="popupBasic" data-theme="e" style="max-width:350px;">
		<a href="#" data-rel="back" data-role="button" data-theme="e" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <h5>&nbsp;</h5>
    <p id="popupBasicP"></p>
    <h5>&nbsp;</h5>
  </div>
		  
	<script type="text/javascript">
	$(document).ready(function() {
		
			jQuery(":radio").bind("click",function(){
				var id = jQuery("#id").val();
				var qId = jQuery(this).attr("name");
				var oId = jQuery(this).val();
				var relation = jQuery("#relation").val();
				var score = jQuery(this).attr("score");
				var checked = jQuery(this).attr("checked");
				var require = jQuery(this).attr("required");
				
				if ("checked" == checked){
					jQuery.post("<%=request.getContextPath()%>/answer/user/saveSingleQuestion.html",{
						id:id,
						qId:qId,
						oId:oId,
						relation:relation,
						score:score
					},function(data){
						if (!data){
							alert("系统错误！");
						}
					},"json");
				}
			});

			

			jQuery("textarea").bind("blur",function(){
				var qId = jQuery(this).attr("name");
				var id = jQuery("#id").val();
				var answer = jQuery(this).val();
				var relation = jQuery("#relation").val();
				jQuery.post("<%=request.getContextPath()%>/answer/user/saveTextQuestion.html?",{
					id:id,
					qId:qId,
					answer:answer,
					relation:relation
				},function(data){
					
					if (!data){
						alert("系统错误！");
					}
					
				},"json");
			});
		
		});

	// 保存
	function saveAnswer(){
		var id = jQuery("#id").val();
		var relation = jQuery("#relation").val();
		
		jQuery.post("<%=request.getContextPath()%>/answer/user/submitAnswer.html?type=save",{
			id:id,
			relation:relation
		},function(data){
				jQuery("#popupBasicP").html("&nbsp;&nbsp;"+data);
				jQuery("#popupBasic").popup('open');
       setTimeout(function(){
         $("#popupBasic").popup("close");
       }, 2000);
		},"json");
	}

	// 提交
	function submitAnswer(){

		var sname = "";
		var checked = "";
		var count = 0;
		jQuery("input[required='0']").each(function(){
			if(sname == "" || sname != jQuery(this).attr("name")){
					sname = jQuery(this).attr("name");
					checked = jQuery(":radio[name="+sname+"]:checked").val();
					if(checked == null || checked == ""){
						count +=1;
					}
			}
		});
		var valGet = "";
		jQuery("textarea[required='0']").each(function(){
					valGet = jQuery(this).val();
					if(valGet == null || valGet == ""){
						count +=1;
					}
		});
		if(count >0 ){
			jQuery("#popupBasicP").html("&nbsp;&nbsp;请回答所有必选题后再提交");
			jQuery("#popupBasic").popup('open');
			//alert("请回答所有必选题后再提交！");
			return false;
		}else{
			jQuery("#popupDialog").popup('open');
		}
	}
	// 提交
	function submitAll(){
			var id = jQuery("#id").val();
			var relation = jQuery("#relation").val();
			
			jQuery.post("<%=request.getContextPath()%>/answer/user/submitAnswer.html?type=submit",{
				id:id,
				relation:relation
			},function(data){
				jQuery("#popupDialog").popup('close');
				jQuery("#popupBasicP").html("&nbsp;&nbsp;"+data);
				jQuery("#popupBasic").popup('open');
			   setTimeout(function(){
					  jQuery("#popupBasic").popup('open');
						var url = "<%=request.getContextPath() %>/answer/user/answerListPhone.html";
						var dt = new Date().valueOf();
						url += "?date="+dt;
						$.mobile.changePage(url);
			   }, 1000);
			},"json");
	}
	</script>	
</div><!-- /page -->
</body>
</html>
